<template>
  <div class="order-detail">
    <el-button class="back-btn" type="primary" @click="back">返回</el-button>
    <div class="order-wrap">
      <el-steps :active="4" align-center process-status="wait">
        <el-step
          title="充电结束时间"
          :description="
            data.detailData.createTime ? data.detailData.createTime : '--'
          "
        />
        <el-step
          title="占用开始时间"
          :description="
            data.detailData.startTime ? data.detailData.startTime : '--'
          "
        />
        <el-step
          title="占用结束时间"
          :description="
            data.detailData.endTime ? data.detailData.endTime : '--'
          "
        />
        <el-step
          title="订单支付"
          :description="
            data.detailData.payTime ? data.detailData.payTime : '--'
          "
        />
      </el-steps>
      <div class="price-card">
        <div class="card-data left">
          <div class="card-data">
            <div class="card-item">
              <div class="title">占用时长：</div>
              <div class="card-value">
                {{
                  data.detailData.durationHours
                    ? data.detailData.durationHours
                    : '--'
                }}
              </div>
            </div>
            <div class="card-item">
              <div class="title">订单计费：</div>
              <div class="card-value">
                ￥{{
                  data.detailData.oughtAmount
                    ? data.detailData.oughtAmount
                    : '--'
                }}
              </div>
            </div>
            <div class="card-item">
              <div class="title">占用收费：</div>
              <div class="card-value">
                ￥{{ data.detailData.amount ? data.detailData.amount : '--' }}
              </div>
            </div>
          </div>
        </div>
        <div class="right"></div>
      </div>

      <Head title="占用信息">
        <template #content>
          <div class="order-info">
            <Detail
              :columns="2"
              :form="detailForm"
              :detail="data.detailData"
              align="right"
            ></Detail>
          </div>
        </template>
      </Head>
      <Head title="用户信息">
        <template #content>
          <div class="order-info">
            <Detail
              :columns="2"
              :form="detailForm1"
              :detail="data.detailData"
              align="right"
            ></Detail>
          </div>
        </template>
      </Head>
      <Head title="订单信息">
        <template #content>
          <div class="order-info">
            <Detail
              :columns="2"
              :form="detailForm2"
              :detail="data.detailData"
              align="right"
            ></Detail>
          </div>
        </template>
      </Head>
    </div>
  </div>
</template>
  
<script lang="ts" setup>
import Head from '@/components/head/index.vue';
import Detail from '@/components/form/detail.vue';
import { getOccupyOrder } from '@/service/apis/order';
import { queryDicByParent } from '@/service/apis/api';
import { getLabel } from '@/utils/utils';
const route = useRoute();
const router = useRouter();
const {
  query: { id },
} = route;
let data = reactive({
  detailData: {} as any,
  activeTab: 'info',
  startChargeSeq: '',
  chartsData: [] as any,
  chartsType: '',
  isData: true,
});
const detailForm = reactive([
  {
    label: '所属电站',
    prop: 'stationName',
  },
  {
    label: '占用终端编码',
    prop: 'connectorId',
  },
  {
    label: '停车缓冲时长',
    prop: 'bufferTime',
    unit: '分钟',
  },
  {
    label: '超时计费',
    prop: 'price',
    template: (row: any, index: number) => {
      return `${row.price}元/${row.priceTime}分钟`;
    },
  },
  {
    label: '关联充电订单',
    prop: 'startChargeSeq',
  },
  {
    label: '充电结束时间',
    prop: 'createTime',
  },
]);

const detailForm1 = reactive([
  {
    label: '用户账号',
    prop: 'accountNumber',
  },
  {
    label: '用户姓名',
    prop: 'userName',
  },
  {
    label: '归属企业',
    prop: 'orgName',
  },
]);

const detailForm2 = reactive([
  {
    label: '占用订单号',
    prop: 'orderId',
  },
  {
    label: '订单结束原因',
    prop: 'status',
    dic: [] as any,
    type: Number,
    template: (row: any, index: number) => {
      const abnormalCause = getLabel(row, detailForm2[1]);
      if (row.abnormalRemark) {
        return `${abnormalCause}（${row.abnormalRemark}）`;
      } else {
        return `${abnormalCause}`;
      }
    },
  },
]);

getOccupyOrder(Number(id)).then((res: any) => {
  if (res) {
    data.detailData = res;
    data.startChargeSeq = res.startChargeSeq;
  }
});

queryDicByParent({
  listDtos: ['status', 'orgType'],
}).then((res: any) => {
  if (res) {
    detailForm2[1].dic = [...res.status];
  }
});

const back = () => {
  router.go(-1);
};
</script>
<style lang="scss">
.order-detail {
  position: relative;

  .back-btn {
    position: absolute;
    right: 20px;
    top: 6px;
    z-index: 10;
  }
}

.order-wrap {
  .order-reason {
    display: flex;
    justify-content: space-around;
    font-weight: 500;
    font-size: 16px;
    color: #5073f7;
    width: 100%;
    margin-top: 20px;

    // padding: 0 100px;
    .order-no {
      width: 50%;
    }
  }

  .price-card {
    margin-top: 20px;
    width: 100%;
    height: 119px;
    background: linear-gradient(
      98.09deg,
      rgba(107, 164, 254, 0.36) 0%,
      rgba(67, 109, 255, 0.36) 73.83%
    );
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      width: calc(100% - 128px);

      .card-data {
        display: flex;
        align-items: center;
        justify-content: space-around;
        color: #ffff;
        align-items: center;

        .card-item {
          text-align: center;

          .iconfont {
            font-size: 36px;
            line-height: 36px;
          }

          .title {
            margin-top: 2px;
            color: #555555;
            font-weight: 400;
            font-size: 15px;
            line-height: 23px;
          }

          .card-value {
            margin-top: 8px;
            font-weight: 700;
            font-size: 36px;
            line-height: 44px;
            color: #5073f7;
          }

          .card-value1 {
            color: #292d32;
            display: flex;
            align-items: center;
          }
        }

        .card-item1 {
          display: flex;
          align-items: flex-end;

          .fee {
            font-weight: 700;
            font-size: 12px;
            line-height: 16px;
            margin-left: 10px;
            margin-bottom: 6px;
            color: #5073f7;
          }
        }
      }
    }

    .right {
      width: 128px;
      height: 118px;
      background-image: url(@/assets/images/order-wallet.png);
      background-repeat: no-repeat;
      background-size: cover;
      margin-top: 26px;
    }
  }

  .order-info {
    display: flex;
    justify-content: space-around;

    .order-detail {
      margin-top: 20px;
    }
  }
}

.charts-box1,
.charts-box2,
.charts-box3 {
  // background: #fff;
  border: 1px solid #b3c1f6;
  // width: cale(100% - 20px);
  width: calc(100% - 20px);
  margin: 20px 10px;
  height: 336px;
  box-sizing: border-box;

  .charts-warp {
    width: 100%;
    height: 100%;
  }
}
</style>
  